import React from "react";
import { Button, Radio, Icon } from 'antd';
import styles from './index.less';
import Histogram from './histogram';
import Pie from './pie';
import LineChart from './lineChart';
import CiaxCharts from './ciaxCharts';
import GroupBarChart from './groupBarChart';
import GroupLineChart from './groupLineChart';
import CiaxPie from './ciaxPie';

class Charts extends React.Component {
    state = {
      visbleWay:'histogram',
      data:this.props.data,
      text:this.props.text,
      type:this.props.type,
      defs:this.props.defs,
    };
    handleSizeChange = e => {
        this.setState({ visbleWay: e.target.value });
    };

    render() {
      const { visbleWay } = this.state;
      const { visbleWay1, data, text, type, defs,height,txlx ,column } = this.props;
      const cols = {
        key: {
          tickInterval: 20
        }
      };
      console.log(visbleWay)
      return (
        <div >
          { (!type || type.length > 1) &&　(
            <div className={styles.headTab}>
              <Radio.Group value={visbleWay} onChange={this.handleSizeChange}  >
                  {!type || type.indexOf("histogram") > -1 ? <Radio.Button value="histogram">柱状图</Radio.Button> : ""}
                  {!type || type.indexOf("pie") > -1 ? <Radio.Button value="pie">饼状图</Radio.Button> : ""}
                  {!type || type.indexOf("lineChart") > -1 ? <Radio.Button value="lineChart">折线图</Radio.Button> : ""}
                </Radio.Group>
            </div>
          )}


          {visbleWay === 'histogram' && txlx === 'default' && (
            <Histogram data={data} cols={cols} defs={defs} />
          )}
          {visbleWay === 'histogram' && txlx === 'ciax' && (
            <CiaxCharts data={data}  />
          )}
          {visbleWay === 'histogram' && txlx === 'group' && (
            <GroupBarChart data={data} column={column} />
          )}
          {visbleWay === 'histogram' && txlx === 'linegroup' && (
            <GroupLineChart data={data} column={column} />
          )}
          {visbleWay === 'pie' && txlx === 'default' && (
            <Pie data={data} text={text} />
          )}
          {visbleWay === 'pie' && txlx === 'ciax' &&  (
            <CiaxPie data={data} text={text} />
          )}
          {visbleWay === 'pie' && txlx === 'group' &&  (
            <CiaxPie data={data} text={text} />
          )}
          {visbleWay === 'lineChart' && (
            <LineChart data={data} defs={defs} />
          )}

        </div>
      );
    }
}

export default Charts;
